<template>
  <el-popover
    placement="bottom"
    trigger="click"
    width="256"
    popper-class="field-management-btn-popover"
    :visible-arrow="false"
  >
    <div class="field-management-header mb-10">字段管理</div>
    <el-input
      v-model="filterText"
      class="field-management-search mb-10"
      placeholder="搜索"
      prefix-icon="el-icon-search"
      clearable
      @input="getSearch"
    />
    <el-button slot="reference" class="font-normal" type="text" size="medium">
      <!-- <zn-icon :icon-name="'icon-list'" /> -->
      <span>字段管理</span>
    </el-button>
    <div
      v-if="options.fields && getSearch().length > 0"
      class="field-management-main"
    >
      <el-row :gutter="10" type="flex" class="row-flex">
        <ZnDraggable
          class="mb-10"
          v-bind="dragOptions"
          :list="options.fields"
          @end="submitHeader()"
        >
          <el-col
            v-for="(item, index) in getSearch()"
            :key="item.id + item.label + index"
            :class="item.isShow ? 'outer-layer' : 'outer-layer-discoloration'"
            :span="24"
          >
            <el-col :span="5" class="no-padding">
              <!-- <zn-icon :icon-name="'icon-drag-dot'" /> -->
              <!-- <zn-icon :icon-name="item.extra.icon" class="ml-5" /> -->
            </el-col>
            <el-col :span="16" class="overflowOne">{{ item.label }}</el-col>
            <el-col :span="3">
              <!-- <zn-icon v-if="item.isShow" :icon-name="'icon-eye'" @click="setIsShow(item)" /> -->
              <!-- <zn-icon v-else :icon-name="'icon-eye-invisible'" @click="setIsShow(item)" /> -->
            </el-col>
          </el-col>
        </ZnDraggable>
      </el-row>
    </div>
    <div v-else class="field-management-main dataTips">
      <el-col :span="24">{{ dataTips }}</el-col>
    </div>
    <div
      v-if="options.fields && getSearch().length > 0"
      class="field-management-footer"
    >
      <el-row :gutter="10">
        <el-col :span="12">
          <el-button type="primary" size="medium" @click="hideAll">隐藏所有</el-button>
        </el-col>
        <el-col :span="12">
          <el-button type="primary" size="medium" @click="showAll">显示所有</el-button>
        </el-col>
      </el-row>
    </div>
  </el-popover>
</template>

<script>
import ZnDraggable from "vuedraggable"; // 字段管理拖拽插件
// import { saveHeader } from "@/api/index";

export default {
  name: "ZnFieldManagementBtn",
  components: {
    ZnDraggable
  },
  props: {
    options: {
      type: Object, // 字段管理数据
      default: () => {}
    },
    // eslint-disable-next-line vue/prop-name-casing
    views_id: {
      type: String, // 视图ID
      default: ""
    },
    mark: {
      type: String, // mark特定标识
      default: () => ""
    }
  },
  data() {
    return {
      filterText: "",
      dataTips: "",
      checkList: [],
      form: {
        mark: this.mark,
        header: {
          fields: []
        },
        views_id: ""
      }
    };
  },
  computed: {
    dragOptions() {
      return {
        animation: 600,
        group: "description"
      };
    },
    // 搜索
    // eslint-disable-next-line vue/return-in-computed-property
    filterSearch() {
      if (this.filterText) {
        return this.options.fields.filter(value =>
          value.label.includes(this.filterText)
        );
      }
    }
  },
  watch: {
    "options.fields": {
      handler(newVal) {
        if (this.options.fields && this.options.fields.length > 0) {
          this.checkList = [];
          this.options.fields.forEach(item => {
            if (item.isShow === true) {
              this.checkList.push(item.label);
            }
          });
        } else {
          this.checkList = [];
        }
        this.notifyParent();
      },
      deep: true,
      immediate: true
    }
  },
  created() {},
  mounted() {},
  methods: {
    // 处理提示
    getSearch() {
      if (!this.filterText) {
        if (!this.options.fields.length > 0) {
          this.dataTips = "暂无数据";
        }
        return this.options.fields;
      } else {
        if (!this.filterSearch.length > 0) {
          this.dataTips = "暂无搜索结果";
        }
        return this.filterSearch;
      }
    },
    // 单条数据处理显示与否
    setIsShow(item) {
      this.options.fields.forEach((i, t) => {
        if (i.id === item.id) {
          i.isShow = !i.isShow;
        }
        this.checkList.splice(t, 0, this.options.fields[t].label);
      });
      this.submitHeader();
    },
    // 保存更改
    submitHeader() {
      this.form.views_id = this.views_id;
      this.form.header.fields = this.options.fields;
      // saveHeader(this.form).then(res => {});
      this.notifyParent();
    },
    // 提示父级更新
    notifyParent() {
      this.$emit("upTable", this.options.fields, this.checkList);
    },

    // 隐藏所有
    hideAll() {
      this.options.fields.forEach(item => {
        item.isShow = false;
      });
      this.submitHeader();
    },
    // 显示所有
    showAll() {
      this.options.fields.forEach(item => {
        item.isShow = true;
      });
      this.submitHeader();
    }
  }
};
</script>

<style lang="scss" scoped>
.field-management-header {
  font-weight: 600;
}
::v-deep.field-management-search {
  .el-input__inner {
    margin-left: 0;
    padding-left: 20px;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .el-input__prefix {
    margin-left: -10px;
  }
}
.row-flex {
  height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  // .outer-layer {
  // color: $base-text-5;
  // }
  // .outer-layer-discoloration {
  // color: $base-line-4;
  // }
  .outer-layer-discoloration,
  .outer-layer {
    height: 36px;
    line-height: 36px;
    cursor: pointer;
  }
  .outer-layer:hover {
    // background-color: $base-color-public;
    // color: $base-main-tone !important;
    cursor: pointer;
  }
}
.no-padding {
  padding: 0 !important;
}
.dataTips {
  padding: 24px;
  text-align: center;
  // color: $base-line-4;
}
.field-management-footer {
  // border-top: 1px solid $base-line-1;
  // padding: $base-padding;
  padding-bottom: 0;
  // .el-button {
  // border: $base-line-1;
  // background: $base-line-1;
  // color: $base-text-5;
  // }
}
</style>
